<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <div id="div1" style="height: 75vh;width:40vw;"></div>
      </el-col>
      <el-col :span="12">
        <div id="div2" style="height: 75vh;width:40vw;"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "UserAnalyse",
  mounted() {
    this.init();
  },
  methods: {
    init(){
      let option1 = {
        title: {
          text: '员工使用会议室次数分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '工号',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 15, name: 'A001' },
              { value: 16, name: 'A002' },
              { value: 17, name: 'A112' },
              { value: 18, name: 'B001' },
              { value: 19, name: 'C001' },
              { value: 10, name: 'A060' },
              { value: 11, name: 'A071' },
              { value: 12, name: 'A081' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let option2 = {
        title: {
          text: '员工违规次数分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '次数',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 5, name: 'A001' },
              { value: 6, name: 'A002' },
              { value: 7, name: 'A112' },
              { value: 8, name: 'B001' },
              { value: 9, name: 'C001' },
              { value: 10, name: 'A060' },
              { value: 11, name: 'A071' },
              { value: 12, name: 'A081' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById('div1'));
      window.onresize = myChart.resize;
      myChart.setOption(option1);
      let myChart2 = this.$echarts.init(document.getElementById('div2'));
      window.onresize = myChart2.resize;
      myChart2.setOption(option2);
    }
  }
}
</script>

<style scoped>

</style>
